<template>
    <el-header id="header">
        <div>
            <img style="width: 200px; height: 40px; margin: 20px 0 0 -12px" src="@/assets/welcome.png" />
        </div>
        <el-dropdown split-button type="default">
            {{ user.nickname }}
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-header>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getSessionStorage, setSessionStorage } from '@/utils/common.js';

// 使用组合式API的router和store
const router = useRouter();
const store = useStore();

// 响应式数据
const user = ref(getSessionStorage('user'));

// 退出登录方法
const logout = () => {
    sessionStorage.setItem('token', null);
    setSessionStorage('user', null);
    store.commit('addMenu', []);
    store.commit('clearTab', []);
    router.push('/');
};
</script>

<style scoped>
#header {
    max-height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header>h2 {
    color: #0b67b8;
}
</style>